<template>
	<view class="more" :style="{width:windowWidth}" v-if="onMore">
		<view class="closeMore" @tap="close" />
		<view>
			<view class="on_line_top">
				<text class="on_line_title text-white">
					更多
				</text>
				<image class="back_xx" @tap="close" src="@/static/zhibo/guanbi.png" />
			</view>
			<view class="more_settings">
				<view class="more_item" @tap="clickme">
					<image class="back" src="@/static/zhibo/meiyan.png" />
					<text class="text-white fs-30">美颜</text>
				</view>
				<view class="more_item" @tap="switchCamera">
					<image class="back" src="@/static/zhibo/xiangji.png" />
					<text class="text-white fs-30">翻转</text>
				</view>
				<view class="more_item" @tap="openSendGifts">
					<image class="back" src="@/static/zhibo/liwu.png" />
					<text class="text-white fs-30">打赏记录</text>
				</view>
				<view class="more_item">
					<image class="back" src="@/static/zhibo/qianbo.png" />
					<text class="text-white fs-30">钱包</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		'onMore': {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {

		}
	},
	mounted() {
		const {
			windowWidth,
			windowHeight
		} = uni.getSystemInfoSync();
	},
	methods: {
		close() {
			this.$emit("closeMore")
		},
		switchCamera() {
			this.$emit("switchCamera")
		},
		clickme() {
			this.close()
			this.$emit("clickme")
		},
		openSendGifts(){
			this.$emit("openOperation")
            this.$emit("openSendGifts")
        }
	}
}
</script>

<style scoped lang="scss">
.back {
	width: 60rpx;
	height: 60rpx;
}

.back_xx {
	width: 30rpx;
	height: 30rpx;
}

.text-white {
	color: #fff;
}

.on_line_top {
	width: 750rpx;
	height: 100rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.on_line_title {
	width: 650rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
}

.fs-30 {
	font-size: 30rpx;
}

// 更多
.more {

	height: 300rpx;
	position: fixed;
	bottom: 0;
	border-radius: 40rpx 40rpx 0 0;
	background-color: rgb(26, 25, 30);
}

.closeMore {
	width: 750rpx;
	height: 1000rpx;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 1000;
}

.more_settings {
	width: 750rpx;
	height: 530rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.more_item {
	width: 125rpx;
	height: 125rpx;
	text-align: center;
	justify-content: space-around;
	align-items: center;
}
</style>